<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="GBK">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

    <title>Mobiscroll</title>

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

    <!--Includes-->
	<link href="css/mobiscroll.custom-2.6.2.min.css" rel="stylesheet" type="text/css" />
	<script src="js/mobiscroll.custom-2.6.2.min.js" type="text/javascript"></script>

  
    <script type="text/javascript">
	$(function(){
    $('#demo').mobiscroll().date({
		preset: 'date', //日期
		theme: 'sense-ui', //皮肤样式
		display: 'bubble', //显示方式 
		mode: 'scroller', //日期选择模式
		dateFormat: 'yyyy-mm-dd', // 日期格式
		setText: '确定', //确认按钮名称
		cancelText: '取消',//取消按钮名籍我
		dateOrder: 'yyyy-mm-dd', //面板中日期排列格式
		dayText: '日', monthText: '月', yearText: '年', //面板中年月日文字
		endYear:2050 //结束年份
    });    
    $('#show').click(function(){
        $('#demo').mobiscroll('show'); 
        return false;
    });
    $('#clear').click(function () {
        $('#demo').val('');
        return false;
    });
});
/*
        $(function () {
		
            var opt = {
				preset: 'date', //日期
				theme: 'sense-ui', //皮肤样式
				display: 'bubble', //显示方式 
				mode: 'scroller', //日期选择模式
				dateFormat: 'yyyy-mm-dd', // 日期格式
				setText: '确定', //确认按钮名称
				cancelText: '取消',//取消按钮名籍我
				dateOrder: 'yyyy-mm-dd', //面板中日期排列格式
				dayText: '日', monthText: '月', yearText: '年', //面板中年月日文字
				endYear:2050 //结束年份
            }
            opt.date = {preset : 'date', minDate: new Date(1900,0,1), maxDate: new Date(2050,11,31),};
			opt.datetime = { preset : 'datetime', minDate: new Date(1900,0,1,0,0), maxDate: new Date(2050,11,31,23,59), stepMinute: 5  };
	<!--Script-->
			
            $('select.changes').bind('change', function() {
                $('#test_default').val('').scroller('destroy').scroller($.extend(opt['datetime'], { theme: 'sense-ui', mode: 'scroller', display: 'bubble', lang: 'zh'}));
            });
			$("#demo").hide();
            $('#demo').trigger('change');
			
        });
		
    */
    </script>
</head>

<body>
	<input name="demo" id="demo" class="i-txt" />

	<a href="#" id="clear" class="btn btn-blue"><span class="btn-i">Clear</span></a>
	<a href="#" id="show" class="btn btn-blue"><span class="btn-i">Show</span></a>
	<!--
	<select name="demo" id="demo" class="changes">
	</select>
    <input type="text" name="test_default" id="test_default" />
	-->
</body>
</html>
